<template>
  <div class="login-container">
    <img class="bgimg" :src="loginBackgroundUrl" />
    <div class="logo-container">
      <logo-component :title="loginTitle" />
    </div>
    <div class="login-box">
      <div class="box-card">
        <el-form
          ref="loginFormRef"
          :rules="loginRules"
          :model="loginData"
          class="login-form"
        >
          <div class="flex text-black items-center py-4">
            <div class="text-2xl flex-1 text-center title">
              欢迎登录系统
              <div class="bottom-line"></div>
            </div>
          </div>
          <div class="login-content">
            <!-- 用户名称 -->
            <el-form-item prop="phone">
              <div class="p-2">
                <svg-icon style="color: #3276ff;" icon-class="user"/>
              </div>
              <el-input
                class="d-flex align-items-center"
                ref="username"
                size="large"
                v-model="loginData.phone"
                placeholder="输入用户名"
                name="username"
              />
            </el-form-item>

            <el-tooltip
              :disabled="isCapslock === false"
              content="Caps lock is On"
              placement="right"
            >
              <el-form-item prop="pwd">
                  <span class="p-2">
                    <svg-icon style="color: #3276ff;" icon-class="password"/>
                  </span>
                  <!-- 密码 -->
                  <el-input
                    class="d-flex align-items-center"
                    v-model="loginData.pwd"
                    placeholder="密码"
                    :type="passwordVisible === false ? 'password' : 'input'"
                    size="large"
                    name="password"
                    @keyup.native="checkCapslock"
                    @keyup.enter.native="handleLogin"
                  />
                  <span class="mr-2 d-flex align-items-center" @click="passwordVisible = !passwordVisible">
                    <svg-icon
                    :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
                    style="color: #3276ff;"
                    class="text-gray cursor-pointer"
                  />
                  </span>
              </el-form-item>
            </el-tooltip>

            <el-form-item class="remember">
              <el-checkbox v-model="remember">记住密码</el-checkbox>
            </el-form-item>
            <el-button
              size="default"
              :loading="loading"
              class="w-full mt-3"
              @click.prevent="handleLogin"
            >登录
            </el-button>
          </div>

          <!-- 账号密码提示 -->
        </el-form>
        <div class="bottom-title">
          <div class="left-line"></div>
          <div class="center-name">欢迎登录系统</div>
          <div class="right-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { passwordValidator } from "./validator"
  import logoComponent from "@/components/LoginLogo"
  import { queryLoginInfo } from "@/api/user"

  export default {
    name: "App",
    data() {
      return {
        systemRefCode: "",
        loginTitle: "",
        loginBackgroundUrl: "",
        loading: false,
        isCapslock: false,
        passwordVisible: false,
        isMessageBoxShow: false,
        remember: true,
        loginData: {
          phone: 15380766060,
          pwd: "888888"
        },
        loginRules: {
          phone: [{required: true, trigger: "blur"}],
          pwd: [
            {required: true, trigger: "blur", validator: passwordValidator}
          ]
        },
      }
    },
    components: {
      logoComponent
    },
    created() {
      this.systemRefCode = this.$route.query.systemRefCode;
      sessionStorage.setItem("systemRefCode", this.systemRefCode);

      this.getLoginBg()
    },
    methods: {
      getLoginBg() {
        /**
         * 获取登录页面信息
         */
        queryLoginInfo({systemRefCode: this.systemRefCode}).then(res => {
          if(res.status == 200) {
            this.loginTitle = res.object.loginTitle;
            this.loginBackgroundUrl = res.object.loginBackgroundUrl;
            sessionStorage.setItem("systemCode", res.object.systemCode);  //系统编码
            sessionStorage.setItem("systemName", res.object.systemName);  //系统名称
            sessionStorage.setItem("systemUiType", res.object.systemUiType);  //UI风格
          } else {
            this.loginTitle = '';
            this.loginBackgroundUrl = '';
          }
        })
      },

      /**
       * 检查输入大小写状态
       */
      checkCapslock(e) {
        const {key} = e
        this.isCapslock = key && key.length === 1 && key >= "A" && key <= "Z"
      },
      handleLogin() {
        this.$refs.loginFormRef.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store.dispatch("user/login", this.loginData).then((show) => {
              if (show) {
                this.isMessageBoxShow = show
              } else {
                this.$router.push({path: "/home"})
              }
            }).catch(() => {
              // 验证失败
            }).finally(() => {
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    background: radial-gradient(#07424A 0%, #010B10 100%);
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-size: 100% 100%;

    .bgimg {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .logo-container {
      margin-top: 50px;
      margin-bottom: 20px;
    }

    .box-card2 {
      background: url("../../assets/login/login.png") no-repeat;
      background-size: 100% 100%;
    }

    .login-box {
      position: absolute;
      right: 10.8%;
      width: 29.5%;
      min-width: 450px;
      margin-top: 1.6%;
    }

    .box-card {
      background-color: #14353e;
      padding-bottom: 40px;

      .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 15px;
        font-size: 20px;
        font-weight: 500;
        color: #FFF;

        .bottom-line {
          width: 42px;
          height: 4px;
          margin-top: 12px;
          background: #1a8b9b;
        }
      }

      .login-form {
        width: 100%;
        // min-width: 400px;
        padding: 45px 45px 50px;
        margin: 0 auto;
        overflow: hidden;

        .captcha {
          position: absolute;
          top: 0;
          right: 0;

          img {
            width: 120px;
            height: 48px;
            cursor: pointer;
          }
        }
      }

      .login-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .checkbox {
          .el-form-item {
            background: transparent;
            border-radius: 5px;
          }
        }

        .w-full {
          width: 86%;
          height: 53px;
          background-color: #1a8b9b;
          border: 2px solid #1a8b9b;
          color: #ffffff;
        }
      }

      .bottom-title {
        width: 86%;
        padding: 0 38px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .left-line {
          width: 44%;
          height: 1px;
          background: #d9d9d9;
        }

        .center-name {
          min-width: 96px;
          height: 24px;
          margin: 0 24px;
          font-size: 16px;
          font-weight: 500;
          color: #4a4a4a;
        }

        .right-line {
          // width: 132px;
          width: 44%;
          height: 1px;
          background: #d9d9d9;
        }
      }
    }

    .messageBoxContent {
      width: 100%;
      height: 100%;

      /deep/.el-input__inner {
        color: #989898;
        background: transparent;
        border: 0;
        border-radius: 0;
        caret-color: #989898;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px transparent inset !important;
          -webkit-text-fill-color: #fff !important;
        }

        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          transition: color 99999s ease-out, background-color 99999s ease-out;
          transition-delay: 99999s;
        }
      }
    }
  }

  .el-form-item {
    width: 86%;
    background: #f1f4f8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 0 10px;
    margin-bottom: 28px;

    /deep/.el-form-item__content {
      line-height: 35px;
      display: flex;
    }

    &.remember {
      background: transparent;
      border: none;
      height: 28px;

      /deep/.el-form-item__content {
        line-height: 20px;
        margin-left: 10px;
      }

      .el-checkbox {
        color: #fff;
      }
    }
  }

  .el-input {
    background: transparent;

    // 子组件 scoped 无效，使用 :deep
    // .el-input__wrapper {
    //   padding: 0;
    //   background: transparent;
    //   box-shadow: none;

    //   .el-input__inner {
    //     color: #989898;
    //     background: transparent;
    //     border: 0;
    //     border-radius: 0;
    //     caret-color: #989898;

    //     &:-webkit-autofill {
    //       box-shadow: 0 0 0 1000px transparent inset !important;
    //       -webkit-text-fill-color: #fff !important;
    //     }

    //     // 设置输入框自动填充的延迟属性
    //     &:-webkit-autofill,
    //     &:-webkit-autofill:hover,
    //     &:-webkit-autofill:focus,
    //     &:-webkit-autofill:active {
    //       transition: color 99999s ease-out, background-color 99999s ease-out;
    //       transition-delay: 99999s;
    //     }
    //   }
    // }
  }

  .login-content {
    /deep/.el-input__inner {
      color: #989898;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #989898;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
</style>
